<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="线下入库订单详情"></el-page-header>

            <el-descriptions class="e-m-t-45" :column="2" title="订单信息" border :labelStyle="{ width: '120px' }">
                <el-descriptions-item label="订单ID"><el-tag size="mini" v-if="form.firstOrder">首</el-tag>{{ form.number }}</el-descriptions-item>
                <el-descriptions-item label="下单时间">{{ form.createddatetime }}</el-descriptions-item>
                <el-descriptions-item label="回收金额">{{ form.amount }}元</el-descriptions-item>
                <el-descriptions-item label="支付方式">{{ form.payway }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions v-if="form.user" class="e-m-t-45" :column="2" title="下单用户信息" border :labelStyle="{ width: '120px' }">
                <!-- <el-descriptions-item label="用户编号">{{ form.user.ysid }}</el-descriptions-item> -->
                <el-descriptions-item label="用户名称">{{ form.user.name }}</el-descriptions-item>
                <el-descriptions-item label="用户手机">{{ form.user.mobile }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions v-if="form.enterprise" class="e-m-t-45" :column="2" title="客户组信息" border :labelStyle="{ width: '120px' }">
                <el-descriptions-item label="客户组名称">{{ form.enterprise.name }}</el-descriptions-item>
                <el-descriptions-item label="所属部门">{{ form.enterprise.department || '管理员' }}</el-descriptions-item>
                <el-descriptions-item label="所属地区">{{ form.enterprise.cityname }}</el-descriptions-item>
            </el-descriptions>
            <!-- <el-descriptions class="e-m-t-45" :column="2" title="站点信息" border :labelStyle="{ width: '120px' }">
                <el-descriptions-item v-if="form.staff" label="站点名称">{{ form.store.name }}</el-descriptions-item>
                <el-descriptions-item v-if="form.staff" label="接待店员">{{ form.staff.name }}</el-descriptions-item>
                <el-descriptions-item v-if="form.staff" label="手机号码">{{ form.staff.mobile}}</el-descriptions-item>
            </el-descriptions> -->
            <div class="e-m-t-45 e-m-b-20" style="font-size: 16px;font-weight: bold;">订单明细汇总</div>
                <template>
                    <el-table  border :span-method="objectSpanMethod" :data="tableData" style="width: 100%">
                        <el-table-column prop="name" label="类型" >
                        </el-table-column>
                        <el-table-column prop="typenames" label="小类" >
                        </el-table-column>
                        <el-table-column prop="weight" label="数量" >
                        </el-table-column>
                        <el-table-column prop="price" label="单价">
                        </el-table-column>
                        <el-table-column prop="amount" label="合计">
                        </el-table-column>
                        <el-table-column prop="typeremarks" label="备注">
                        </el-table-column>
                    </el-table>
                </template>
                <div class="e-m-t-25 total" style="text-align: right;font-weight: 500;">共{{form.details.length}}种回收物 合计:<span class="bold">￥{{ form.amount }}</span></div>
                <h4>QC拍照</h4>
                <div class="flex">
                    <el-image class="img" v-for="(item, index) in form.pics" :key="index"
                        style="width: 150px; height: 150px" :src="fileURL + item" fit="cover"
                        :preview-src-list="[fileURL + form.pics[index]]">
                    </el-image>
                </div>
                <el-form label-width="160px" class="e-m-t-45">
                <el-form-item label-width="0" class="e-m-t-30">
                    <el-button @click="goBack">返回</el-button>
                    <el-button type="danger" @click="cancelOrder">取消订单</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 取消理由 -->
        <!-- <el-dialog title="取消订单" :visible.sync="showcancel" width="30%">
            <el-input type="textarea" :rows="5" placeholder="请输入取消订单的理由" v-model="textarea" maxlength="200">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showcancel = false">取消</el-button>
                <el-button type="primary" @click="cancelOrderSubmit">确定</el-button>
            </span>
        </el-dialog> -->
		<el-dialog title="取消订单" :visible.sync="showcancelInfo" width="60%" :append-to-body="true">
			<el-descriptions title="订单信息" :column="2" border :labelStyle="{width:'140px'}">
                <el-descriptions-item label="订单编号：">{{cancelInfo.number}}</el-descriptions-item>
                <el-descriptions-item label="回收账户类型：">{{cancelInfo.payway}}</el-descriptions-item>
                <el-descriptions-item label="回收金额：">{{cancelInfo.amount}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions class="e-m-t-30" title="用户信息" :column="2" border :labelStyle="{width:'140px'}" v-if="cancelInfo.usermobile">
                <el-descriptions-item label="账户编号：">{{cancelInfo.accountnumber}}</el-descriptions-item>
                <el-descriptions-item label="用户名称：">{{cancelInfo.username}}</el-descriptions-item>
                <el-descriptions-item label="用户手机：">{{cancelInfo.usermobile}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions class="e-m-t-30" title="订单相关推广信息" :column="2" border :labelStyle="{width:'140px'}" v-if="cancelInfo.promotionuserid > 0">
                <el-descriptions-item label="推广用户编号：">{{cancelInfo.promotionusernumber}}</el-descriptions-item>
                <el-descriptions-item label="推广用户类型：">{{cancelInfo.promotionusertype}}</el-descriptions-item>
                <el-descriptions-item label="推广用户名称：">{{cancelInfo.promotionuser}}</el-descriptions-item>
                <el-descriptions-item label="推广用户手机：">{{cancelInfo.promotionmobile}}</el-descriptions-item>
                <el-descriptions-item label="推广佣金：">{{cancelInfo.promotioncommission}}</el-descriptions-item>
            </el-descriptions>
            <div class="e-p-t-10 e-p-b-10">
                <div class="tips">提示：</div>
                <div class="tips">1.如果用户未提现，需手动扣除用户账户对应余额</div>
                <div class="tips">2.如果有推广佣金在“推广奖励核算”查看对应佣金是否核算，如果没核算需驳回，如果已审核需手动扣除推广账户对应余额</div>
            </div>
            <el-form class="e-m-t-45" ref="form" :model="cancelForm" :rules="rules" label-width="auto">
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="追回订单金额">
                            <el-input v-model="cancelForm.backOrderAmount" placeholder="请填写"></el-input>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1 e-p-l-15">
                        <el-form-item label="追回订单积分">
                            <el-input v-model="cancelForm.backOrderIntegral" placeholder="请填写"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="追回推广金额">
                            <el-input v-model="cancelForm.backPromotionAmount" placeholder="请填写"></el-input>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1 e-p-l-15">
                        
                    </div>
                </div>
            </el-form>
            <el-input type="textarea" :rows="5" placeholder="请输入取消订单的理由" v-model="textarea" maxlength="200">
            </el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showcancelInfo = false">取消</el-button>
				<el-button type="primary" @click="cancelOrderSubmit">确定</el-button>
			</span>
		</el-dialog>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '线下入库订单详情' 
        }
    },
    props:{
        id: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            form: {
                address: {},
                estimated: [],
                details: [],
                store: {},
                make: [],
                pic: []
            },
            statusArr: ['待派单','待接单','已接单','待上门','待付款','已取消','已回收','待入库','已入库'],
            tableData: [],
            loading: false,
            activeNames: [],
            // 取消订单
            showcancel: false,
            showcancelInfo:false,
            textarea: '',
            nowid: 0,
            cancelInfo:{
                id:0,
                number: '',
                amount:0,
                payway:'',
                accountnumber:'',
                promotionusertype:'',
                promotionusernumber:'',
                promotionuserid:0,
                promotioncommission:0
            },
            cancelForm:{
                reason: "",
                backOrderAmount: 0,
                backOrderIntegral: 0,
                backPromotionAmount: 0
            }
        }
    },
    mounted() {
        // this.id = this.$route.query.id
        this.getDetails(this.id)
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            let mergeLength = 1;//需要进行横纵合并的列
            if (columnIndex < mergeLength) {
                let finArray = [1, 1];
                // 处理行数据
                console.log(Object.keys(row))
                let cgname = Object.keys(row)[5]//7是数字最后一项类型id
                if (rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname]) {
                    let rowspan = 1;
                    //计算需要进行合并操作的行
                    for (let i = 0; i < this.tableData.length - 1; i++) {
                        // 只合并连续的
                        if (this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname]) {
                            rowspan++;
                        }
                    }
                    finArray[0] = rowspan;
                } else {
                    finArray[0] = 0;
                }
                return finArray
            }
        },
        goBack() {
            this.$emit('goBack')
        },
        getDetails(id) {//y用户或者线下
            this.$axios.get('/User/Order/FITDetail?id=' + id).then((res) => {
                console.log(res)
                this.form = res
                
                res.details.forEach((item, index) => {
                    item.details.forEach((cell)=>{
                        this.tableData.push({
                            name: item.names,
                            typenames: cell.productname,
                            weight: cell.weight,
                            price: cell.price,
                            amount: cell.amount,
                            typeremarks: cell.typeremarks || '--'
                        })
                    })
                })
            })
        },
        goLog() {
            this.$router.push({
                path: 'log'
            })
        },
        cancelOrder() {
            this.$axios.get('/User/Order/FITCancelInfo?id=' + this.id).then((res) => {
                this.cancelForm.backOrderAmount = 0;
                this.cancelForm.backOrderIntegral = 0;
                this.cancelForm.backPromotionAmount = 0;
                this.cancelInfo=res;
            }).catch((err)=>{
                console.log(err)
            });
            this.showcancelInfo=true;
        },
        cancelOrderSubmit() {
			this.$axios.post('/Admin/Store/FITOrder/Cancel', {
				id: this.id,
                reason: this.textarea,
                backOrderAmount: this.cancelForm.backOrderAmount,
                backOrderIntegral: this.cancelForm.backOrderIntegral,
                backPromotionAmount: this.cancelForm.backPromotionAmount
			}).then((res) => {
				this.$message({
					type: 'success',
					message: res.msg
				});
				this.showcancelInfo = false;
				this.textarea = "";
                this.getDetails(this.id)
			})
		}
    }
}
</script>

<style lang="scss" scoped>
.img {
    border-radius: 5px;
    margin-right: 15px;
}

.total {
    text-align: right;
    padding-top: 10px;
    color: var(--gray);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .bold {
        font-weight: bold;
        font-size: 18px;
        color: var(--orange);
    }
}
</style>
